<template>
  <div class="change_data">
    <svg-icon @click="change_pop" class-name="icon_size" icon-class="select" />
    <div @click="change_pop" class="v_height">筛选</div>
    <van-popup v-model="show" round position="bottom" @close="closePop">
      <van-cascader @change="onChange" v-model="cascaderValue" title="请选择所在地区" :options="options" :closeable="false"
        :field-names="fieldNames">
        <template #title>
          <div class="set_title">

            <div class="title">筛选所属员工</div>
            <div>

            <van-button style="margin-right:10px" @click="cancel">清除筛选</van-button>
            <van-button @click="confirm">确定</van-button>
            </div>
          </div>
        </template>
      </van-cascader>
    </van-popup>
  </div>
</template>

<script>
  import {
    UserService,
    
  } from '@/api'
  export default {
    model: {
      prop: 'control_search',
      event: 'change',
    },
    props: {
      control_search: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.setOptions();
    },
    methods: {
      onChange({
        selectedOptions,
        value
      }) {
        
        UserService.getUnder({
          user_id: value
        }).then(res => {
          let selectIds = selectedOptions.reduce((result, item, index) => {
            console.log(index, 'up')
            result.push(item.id);
            return result;
          }, [])
          console.log(selectIds, 'down')
          let len = selectIds.length;
          selectIds.reduce((again, item, index) => {
            let s_index = again.reduce((select_id, s_item, s_index) => {
              if (s_item.id == item) {
                return s_index;
              } else {
                return select_id;
              }
            }, 0)
            if (index == (len - 1) && !this._.isEmpty(res.data)) {
              // debugger;
              this.$set(again[s_index], 'items', res.data)
            } else {
              let tmp = again[s_index]['items']
              return tmp
            }
          }, this.options)
        })
      },
      change_pop() {
        this.show = true;
      },
      setOptions() {
        UserService.getUnder().then(res => {
          console.log(res)
          this.options = res.data
        })
      },
      confirm(){
        this.$store.commit('SET_SEARCH',this.cascaderValue)
        this.$EventBus.$emit('update_list');
        this.show = false;
      },
      cancel() {
        this.$store.commit('SET_SEARCH','')
        this.$EventBus.$emit('update_list');
        this.show = false;
      },
      closePop(){
        this.setOptions();
        this.show = false;
      }
    },
    name: 'search',
    data() {
      return {
        show: false,
        cascaderValue: '',
        fieldNames: {
          text: 'name',
          value: 'id',
          children: 'items'
        },
        options: [{
            name: '浙江省',
            code: '330000',
            items: [{
              name: '杭州市',
              code: '330100',
              items: [{
                name: '杭州市1',
                code: '330101',
                items: [{
                  name: '杭州市2',
                  code: '330102',
                  items: [{
                    name: '杭州市3',
                    code: '330103',
                    items: [{
                      name: '杭州市4',
                      code: '330104',
                      items: [{
                        name: '杭州市5',
                        code: '330105',
                        items: [{
                          name: '杭州市6',
                          code: '330106',
                          items: [{
                            name: '杭州市7',
                            code: '330107'
                          }]
                        }]
                      }]
                    }]
                  }]
                }]
              }]
            }],
          },

        ],
      };
    },
  }
</script>

<style lang="less" scoped>
  /deep/.van-cascader__header {
    width: 700px;
    margin: 0 auto;
  }

  /deep/.van-cascader__title {
    width: 100%;

  }


  .change_data {
    font-size: 28px;
    margin-top: 25px;
    margin-right: 25px;
    height: 100px;
    line-height: 100px;
    border-radius: 16px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .set_title {
      display: flex;

      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 26px;
      }
    }

    .icon_size {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
  }
</style>